<template>
  <div>
    <el-select v-model="datePhase.dateType" style="width: 100px; float: left;margin-right:5px;" @change="changeDateType()">
      <el-option v-if="isInDateTypeRange(1)" label="日报" :value="1"></el-option>
      <el-option v-if="isInDateTypeRange(2)" label="周报" :value="2"></el-option>
      <el-option v-if="isInDateTypeRange(3)" label="月报" :value="3"></el-option>
      <el-option v-if="isInDateTypeRange(4)" label="季报" :value="4"></el-option>
    </el-select>
    <div style="float:left;">
      <div v-if="datePhase.dateType==1">
        <el-date-picker v-model="datePhase.value" placeholder="选择日期" type="date" :picker-options="{'firstDayOfWeek': 1}" value-format="yyyy-MM-dd"></el-date-picker>
      </div>
      <div v-if="datePhase.dateType==2">
        <el-date-picker v-model="datePhase.value" placeholder="选择周" type="week" format="yyyy 第 WW 周" :picker-options="{'firstDayOfWeek': 1}" value-format="yyyy-MM-dd"></el-date-picker>
      </div>
      <div v-if="datePhase.dateType==3">
        <el-date-picker v-model="datePhase.value" type="month" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
      </div>
      <div v-if="datePhase.dateType==4">
        <date-season :getValue="getSeason"></date-season>
      </div>
    </div>
    <div style="float: left; padding: 0 10px;width:20px;">
    至
    </div>
    <div style="float: left; padding: 0 10px;">
      <div v-if="datePhase.dateType==1">
        <el-date-picker v-model="datePhase.to" placeholder="选择日期" type="date" :picker-options="{'firstDayOfWeek': 1}" value-format="yyyy-MM-dd"></el-date-picker>
      </div>
      <div v-if="datePhase.dateType==2">
        <el-date-picker v-model="datePhase.to" placeholder="选择周" type="week" format="yyyy 第 WW 周" :picker-options="{'firstDayOfWeek': 1}" value-format="yyyy-MM-dd"></el-date-picker>
      </div>
      <div v-if="datePhase.dateType==3">
        <el-date-picker v-model="datePhase.to" type="month" placeholder="选择月" value-format="yyyy-MM"></el-date-picker>
      </div>
      <div v-if="datePhase.dateType==4">
        <date-season :getValue="getSeason2"></date-season>
      </div>
    </div>
  </div>
</template>

<script>
  import {dateUtil} from '@/utils/dateUtil'
  import DateSeason from './date-season'

  export default {
    components: {DateSeason},
    props: {
      dateTypeRange:{
        default: function () {
          return "12345"
        },
        type: String
      },
      datePhase:{
        default: function () {
          return {
            dateType:2,
            value:'',
            to: ''
          }
        },
        type: Object
      }
    },
    data () {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    },
    created () {
      this.setDefaultValue();
    },
    methods: {
      setDefaultValue(){
          this.datePhase.value = dateUtil.getDefaultDate(this.datePhase.dateType, 1)
          this.datePhase.to = dateUtil.getDefaultDate(this.datePhase.dateType, 1)
      },
      getSeason(s){
        this.datePhase.value = s
      },
      getSeason2(s){
        this.datePhase.to = s
      },
      isInDateTypeRange(num){
        return this.dateTypeRange.indexOf(num)>-1
      },
      changeDateType(){
        this.setDefaultValue();
        //this.datePhase.value = ''
        //this.datePhase.to = ''
      },
/*      getDateDescription(){
        if(this.datePhase.dateType==1){
          return this.datePhase.value;
        }
        else if(this.datePhase.dateType==2){
          let begin = this.datePhase.value;
          let end = dateUtil.thisWeekEnd(dateUtil.parse(this.datePhase.value))
          return begin.replace(/\-/g,'.') + ' - ' + end.replace(/\-/g,'.');
        }
        else if(this.datePhase.dateType==3){
          console.log(this.dateDescription instanceof Date)
          return this.datePhase.value;
        }
        else if(this.datePhase.dateType==4){
          return this.datePhase.value;
        }
        else if(this.datePhase.dateType==5){
          return this.datePhase.value + '年'
        }
        else if(this.datePhase.dateType==6){
          return this.datePhase.value
        }
        return ''
      }*/
    },
    watch: {
      'datePhase.value': {
        handler(newName, oldName) {
          if(this.datePhase.value>this.datePhase.to){
            this.datePhase.to = this.datePhase.value
          }
          //this.datePhase.to = ''
        }
      },
      'datePhase.to': {
        handler(newName, oldName) {
          if(this.datePhase.value>this.datePhase.to){
            this.datePhase.value = this.datePhase.to
          }
          //this.datePhase.to = ''
        }
      }
    }
  }
</script>
